import React, { useEffect, useState } from 'react'
import { Collapse ,InfiniteScroll} from 'antd-mobile'
import { useSelector } from 'react-redux'
import http from '../../utils/http'
import styles from './index.module.css'
import { useNavigate } from 'react-router-dom'
function Index() {
    let navigate = useNavigate()
    const { start, end, date } = useSelector((state) => state.CitySlice)
    const [hasMore, setHasMore] = useState(true)
    // 定义渲染列表的变量
    let [list, setList] = useState([])
    // 渲染列表
    let getList = async () => {
        let res = await http.post('/api/trip/train', {
            start,
            end,
            date,
            
        })

        console.log('列表', res);

        let { code, data } = res.data

        if (code === 200) {
            setList([...list, ...data])
        }

        if (data.lenght === 0) {
            setHasMore(false)
        }

    }
    useEffect(() => {
        getList()
    }, [])
    const handlexq = (id) => {
        navigate(`/xq?id${id} & start${start} & end${end} & date${date}`)
    }
    return (
        <div>
            <Collapse arrowIcon>
                {
                    list?.map((item, ind) => (
                        <Collapse.Panel onClick={() => handlexq(item.id)} key={ind} title={
                            <div>
                                <div className={styles.box}>
                                    <span>{item.start}</span>
                                    <span>{item.startTime}</span>
                                    <span>{item.end}</span>
                                    
                                    
                                </div>
                            </div>
                        }>
                            <div style={{ display: 'flex', justifyContent: 'space-around' }}>
                                <span>商务座 <b>有票</b> </span>
                                <span>一等座 <b>有票</b> </span>
                                <span>二等座 <b>有票</b> </span>
                            </div>

                        </Collapse.Panel>
                    ))
                }
            </Collapse>
            <InfiniteScroll loadMore={getList} hasMore={hasMore} />
        </div>
    )
}

export default Index
